<dom-module id="timeline-view">
  <template>
    <style>
      :host {
        display: flex;
      }
    </style>
    <div id=timeline-view-host class="flexfill flexrow">
    <div id=timeline-view-selection-div>
      <div style="text-align: right">
        <button id=timeline-view-selection-toggle
                title="Toggle visibility of selection view"
                class=timeline-view-rotateleft></button>
      </div>
    <ul id=timeline-view-selection-ul>
      <li id=timeline-view-open-sockets><label><input type=checkbox checked>
        &#9608; <span class=timeline-view-text>Open sockets</span></label>
      </li>
      <li id=timeline-view-in-use-sockets><label><input type=checkbox checked>
        &#9608; <span class=timeline-view-text>In use sockets</span></label>
      </li>
      <li id=timeline-view-url-requests><label><input type=checkbox checked>
        &#9608; <span class=timeline-view-text>URL requests</span></label>
      </li>
      <li id=timeline-view-dns-jobs><label><input type=checkbox checked>
        &#9608; <span class=timeline-view-text>DNS jobs</span></label>
      </li>
      <li id=timeline-view-bytes-received><label><input type=checkbox checked>
        &#9608; <span class=timeline-view-text>Bytes received</span></label>
      </li>
      <li id=timeline-view-bytes-sent><label><input type=checkbox checked>
        &#9608; <span class=timeline-view-text>Bytes sent</span></label>
      </li>
      <li id=timeline-view-disk-cache-bytes-read><label><input type=checkbox checked>
        &#9608; <span class=timeline-view-text>Disk cache bytes read</span></label>
      </li>
      <li id=timeline-view-disk-cache-bytes-written><label><input type=checkbox>
        &#9608; <span class=timeline-view-text>Disk cache bytes written</span></label>
      </li>
    </ul>
    </div>
    <div class="flexfill flexcol">
    <div id=timeline-view-graph-div class="flexfill">
      <canvas id=timeline-view-graph-canvas>
      </canvas>
    </div>
    <div id=timeline-view-scrollbar-div>
      <div id=timeline-view-scrollbar-inner-div>
      </div>
    </div>
    </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'timeline-view',
    });
  </script>
</dom-module>

